<template>
  <div class="container">
    <a-layout>
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="side">
        <div class="logo" style=" padding: 5px">
          <h3 class="title" style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-top: 5px;
              margin: 0;
              letter-spacing: .5px;
            ">
            <img src="@assets/logo/logo.png" class="logo"
              style="width: 30px; margin-right: 5px;vertical-align: middle;" />
            <span style="
                vertical-align: middle;
                color: #fff;
                font-weight: 600;
                font-size: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
              ">数据管理平台</span>
          </h3>
        </div>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" v-model:openKeys="openKeys">
          <router-link v-for="(item, i) in  router.options.routes" :key="item.type"
            :to="{ name: item.meta.name, query: { type: item.meta.type } }">
            <a-menu-item v-if="i > 1 && !item.meta.selectDown" :key="item.meta.type" style="font-size: 16px;">
              <component :is="$antIcons[item.meta.icon]" class="menu_icon" style="font-size: 18px;;margin-right: 10px" />
              {{ item.meta.title }}
            </a-menu-item>
          </router-link>
          <span v-for="(item, i) in  router.options.routes" :key="item.type" style="font-size: 16px;">
            <a-sub-menu v-if="i > 1 && item.meta.selectDown" key="sub1">
              <template #title>
                <span>
                  <component :is="$antIcons[item.meta.icon]" class="menu_icon"
                    style="font-size: 18px;margin-right: 4px" />
                  <span>{{ item.meta.title }}</span>
                </span>
              </template>
              <router-link v-for="(item, i) in item.children" :to="{ name: item.name, query: { type: item.meta.type } }">
                <a-menu-item v-if="item.meta.render" :key="item.meta.type">{{ item.meta.title }}</a-menu-item>
              </router-link>
            </a-sub-menu>
          </span>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="
            background: #fff;
            padding: 0;
            height: 6%;
            position: relative;
          ">
          <div
            style="display: inline-block; float: right;position: absolute;top: 50%;transform: translateY(-50%);right: 1rem;">
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                <user-switch-outlined style="
                    font-size: 24px;
                    margin-right: 10px;
                    vertical-align: middle;
                  " />
                <span style="font-size: 18px; line-height: 50px">{{ state.user.userInfo.name }}</span>
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="personal">个人中心</a-menu-item>
                  <a-menu-item @click="Logout">退出登录</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-layout-header>
        <a-layout-content class="content">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import Breadcrumb from "@components/Breadcrumb.vue";
import { getUserCenterInfo, refreshToken } from '@api/user.js'
import { useStore } from "vuex"
const { state, commit, dispatch } = useStore()
const router = useRouter();
const openKeys = ref(['sub1'])
const selectedKeys = ref(router.currentRoute.value.query.type ? [router.currentRoute.value.query.type] : ['1']);
const collapsed = ref(false);
// 个人中心
function personal() {
  router.push({ name: 'personal' });
}
// 退出登录
function Logout() {
  commit('logout')
  router.push({ name: 'login' });
}
onMounted(() => {
  dispatch('getUserCenterInfo')
})
// selectedKeys.value = [router]
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
}

.content {
  height: calc(100vh);
  overflow-y: scroll;
}

.side {
  width: 350px !important;
  flex: 0 0 250px !important;
  min-width: 250px !important;
  min-width: 250px !important;
}

::v-deep.anticon-plus-circle {
  margin-right: 5px !important;
}
</style>
<style lang="less"></style>
